<template>
	<view class="doctor-container">
		<scroll-view class="scroll-view_H" scroll-y="true" style="height: 100vh;">
			<view class="p-t-15">
				<u-subsection :list="list" fontSize="14" mode="subsection" :current="current" @change="sectionChange"></u-subsection>
			</view>
			<view v-if="current==0" class="body-contain">
				<view id="jibingpepole">
					<view class="nanNv">
						<view class="uswitch">
							<u-switch v-model="showNan" @change="changeNan" size="20" inactiveColor="#5ac725"></u-switch>
							<text>{{showNan==true?'男':'女'}}</text>
						</view>
						<view class="uswitch">
							<u-switch v-model="showNegative" @change="changeNegative" size="20" inactiveColor="#5ac725"></u-switch>
							<text>{{showNegative==false?'正':'反'}}</text>
						</view>
					</view>
					<view class="ertong">
						<u-switch v-model="showChildren" @change="changeChildren" size="20" inactiveColor="#5ac725"></u-switch>
						<text>{{showChildren==false?'成人':'儿童'}}</text>
					</view>
				    <!--男人正面-->
					<view class="jibingpepole_menz" v-if="showNan==true&&showNegative==false&&showChildren==false">
						<!-- <view class="jibingpepole_top_an">
							<view href="#" class="radio-sex-man" ></view>
							<view href="#" class="radio-zm-man" ></view>
						</view>
						<view class="jibingpepole_bot_an">
							<view href="#" class="jbss_age1 jbss_color" >成人</view>
							<view href="#" class="jbss_ch">儿童</view>
						</view> -->
						<!--点击对应的按钮-->
						 <view class="jibingpepole_cent_an">
						   <view   @click="bodyClick('1001','头部','1','','1')" class="men_a1"></view>
						   <view   @click="bodyClick('1008','颈部','1','','1')" class="men_a2"></view>
						   <view   @click="bodyClick('1002','胸部','1','','1')" class="men_a3"></view>
						   <view   @click="bodyClick('1004','腹部','1','','1')" class="men_a4"></view>
						   <view   @click="bodyClick('1005','生殖器','1','','1')" class="men_a5"></view>
						   <view   @click="bodyClick('1012','上肢','1','','1')" class="men_a6"></view>
						   <view   @click="bodyClick('1012','上肢','1','','1')" class="men_a7"></view>
						   <view   @click="bodyClick('1013','下肢','1','','1')" class="men_a8"></view>
						 </view>
					</view>
					
					<!--女人正面-->
					<view class="jibingpepole_nvz" v-if="showNan==false&&showNegative==false&&showChildren==false">
						<!-- <view class="jibingpepole_top_an">
							<view href="#" class="radio-sex-woman" ></view>
							<view href="#" class="radio-zm-woman" ></view>
						</view>
						<view class="jibingpepole_bot_an">
							<view href="#" class="jbss_age1 jbss_color">成人</view>
							 <view href="#" class="jbss_ch">儿童</view>
						</view> -->
						<!--点击对应的按钮-->
						 <view class="jibingpepole_cent_an">
						   <view   @click="bodyClick('1001','头部','2','','1')" class="nv_a1"></view>
						   <view   @click="bodyClick('1008','颈部','2','','1')" class="nv_a2"></view>
						   <view   @click="bodyClick('1002','胸部','2','','1')" class="nv_a3"></view>
						   <view   @click="bodyClick('1004','腹部','2','','1')" class="nv_a4"></view>
						   <view   @click="bodyClick('1005','生殖器','2','','1')" class="nv_a5"></view>
						   <view   @click="bodyClick('1012','上肢','2','','1')" class="nv_a6"></view>
						   <view   @click="bodyClick('1012','上肢','2','','1')" class="nv_a7"></view>
						   <view   @click="bodyClick('1013','下肢','2','','1')" class="nv_a8"></view>
						 </view>
					</view>
					
					<!--儿童男正面-->
					<view class="jibingpepole_childrenz" v-if="showNan==true&&showNegative==false&&showChildren==true">
						<!-- <view class="jibingpepole_top_an">
							<view href="#" class="radio-sex-children" ></view>
							<view href="#" class="radio-zm-children" ></view>
						</view>
						<view class="jibingpepole_bot_an">
							<view href="#" class="jbss_age1">成人</view>
							 <view href="#" class="jbss_ch jbss_color">儿童</view>
						</view> -->
						<!--点击对应的按钮-->
						 <view class="jibingpepole_cent_an">
						   <view   @click="bodyClick('1001','头部','1','1','1')" class="child_a1"></view>
						   <view   @click="bodyClick('1008','颈部','1','1','1')" class="child_a2"></view>
						   <view   @click="bodyClick('1002','胸部','1','1','1')" class="child_a3"></view>
						   <view   @click="bodyClick('1004','腹部','1','1','1')" class="child_a4"></view>
						   <view   @click="bodyClick('1005','生殖器','1','1','1')" class="child_a5"></view>
						   <view   @click="bodyClick('1012','上肢','1','1','1')" class="child_a6"></view>
						   <view   @click="bodyClick('1012','上肢','1','1','1')" class="child_a7"></view>
						   <view   @click="bodyClick('1013','下肢','1','1','1')" class="child_a8"></view>
						 </view>
					</view>  
											  
					<!--儿童女正面-->
					<view class="jibingpepole_childrenz_nv" v-if="showNan==false&&showNegative==false&&showChildren==true">
						<!-- <view class="jibingpepole_top_an">
							<view href="#" class="radio-sex-children_nv" ></view>
							<view href="#" class="radio-zm-children_nv" ></view>
						</view>
						<view class="jibingpepole_bot_an">
							<view href="#" class="jbss_age1">成人</view>
							 <view href="#" class="jbss_ch jbss_color">儿童</view>
						</view> -->
						<!--点击对应的按钮-->
						 <view class="jibingpepole_cent_an">
						   <view   @click="bodyClick('1001','头部','2','1','1')" class="child_nv_a1"></view>
						   <view   @click="bodyClick('1008','颈部','2','1','1')" class="child_nv_a2"></view>
						   <view   @click="bodyClick('1002','胸部','2','1','1')" class="child_nv_a3"></view>
						   <view   @click="bodyClick('1004','腹部','2','1','1')" class="child_nv_a4"></view>
						   <view   @click="bodyClick('1005','生殖器','2','1','1')" class="child_nv_a5"></view>
						   <view   @click="bodyClick('1012','上肢','2','1','1')" class="child_nv_a6"></view>
						   <view   @click="bodyClick('1012','上肢','2','1','1')" class="child_nv_a7"></view>
						   <view   @click="bodyClick('1013','下肢','2','1','1')" class="child_nv_a8"></view>
						 </view>
					</view>                            
					
					<!--男人背面-->
					<view class="jibingpepole_menb" v-if="showNan==true&&showNegative==true&&showChildren==false">
						<!-- <view class="jibingpepole_top_an">
							<view href="#" class="radio-sex-man" ></view>
							<view href="#" class="radio-fm-man" ></view>
						</view>
						<view class="jibingpepole_bot_an">
							<view href="#" class="jbss_age1 jbss_color">成人</view>
							 <view href="#" class="jbss_ch">儿童</view>
						</view> -->
						<!--点击对应的按钮-->
						 <view class="jibingpepole_cent_an">
						   <view   @click="bodyClick('1006','背部','1','','1')" class="men_b1"></view>
						 </view>
					</view>
					 
					<!--女人背面-->
					<view class="jibingpepole_nvb" v-if="showNan==false&&showNegative==true&&showChildren==false">
						<!-- <view class="jibingpepole_top_an">
							<view href="#" class="radio-sex-woman" ></view>
							<view href="#" class="radio-fm-woman" ></view>
						</view>
						<view class="jibingpepole_bot_an">
							<view href="#" class="jbss_age1 jbss_color">成人</view>
							 <view href="#" class="jbss_ch">儿童</view>
						</view> -->
						<!--点击对应的按钮-->
						 <view class="jibingpepole_cent_an">
						   <view    @click="bodyClick('1006','背部','2','','1')" class="nv_b1"></view>
						 </view>
					</view>
					
					<!--儿童男背面-->
					<view class="jibingpepole_childrenb" v-if="showNan==true&&showNegative==true&&showChildren==true">
						<!-- <view class="jibingpepole_top_an">
							<view href="#" class="radio-sex-children" ></view>
							<view href="#" class="radio-fm-children" ></view>
						</view>
						<view class="jibingpepole_bot_an">
							<view href="#" class="jbss_age1">成人</view>
							 <view href="#" class="jbss_ch jbss_color">儿童</view>
						</view> -->
						<!--点击对应的按钮-->
						 <view class="jibingpepole_cent_an">
						   <view    @click="bodyClick('1006','背部','1','1','1')" class="child_b1"></view>
						 </view>
					</view>
					
					<!--儿童女背面-->
					<view class="jibingpepole_childrenb_nv" v-if="showNan==false&&showNegative==true&&showChildren==true">
						<!-- <view class="jibingpepole_top_an">
							<view href="#" class="radio-sex-children_nv" ></view>
							<view href="#" class="radio-fm-children_nv" ></view>
						</view>
						<view class="jibingpepole_bot_an">
							<view href="#" class="jbss_age1">成人</view>
							 <view href="#" class="jbss_ch jbss_color">儿童</view>
						</view> -->
						<!--点击对应的按钮-->
						 <view class="jibingpepole_cent_an">
						   <view    @click="bodyClick('1006','背部','2','1','1')" class="child_nv_b1"></view>
						 </view>
					</view> 
					
				</view>
			</view>
			<view v-else class="list-contain">
				<view class="item flex align-center justify-between" v-for="(item,index) in bodyLists" :key="index" @click="bodyClick(item.bodyCode,item.bodyName,'','','')">
					<text>{{item.bodyName}}</text>
					<img style="width: 40rpx;" src="@/static/images/arrow-right.svg" alt="">
				</view>
			</view>
		</scroll-view>
		<!-- 身体部位对应症状列表-->
		<u-popup :show="isShowList" mode="right" :closeclickOverlay="true" @close="isShowList=false">
			<view class="flex align-center justify-between p-t-15" style="width: 15rem;" @click="isShowList=false">
				<img style="width: 40rpx;" src="@/static/images/arrow-left.png" alt="">
				<view class="flex align-center justify-center" style="flex: 1;">
					<text>{{headerTitle}}</text>
				</view>
			</view>
			<view class="listItem" v-for="(item,index) in correspondingList" :key="index" @click="goDialogBox(item)">
				{{item.symName}}
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {
		getGuideBody,
		getGuideSymptom,
		guideBodyList,
		guideSymptomList
	} from "@/api/home/home.js";
	export default {
		data() {
			return {
				current: 0,
				list: ['身体部位', '列表'],
				bodyLists: [],
				isShow: false,
				symptomLists: [],
				showNan:true,
				showNegative:false,
				showChildren:false,
				correspondingList:[],
				isShowList:false,
				headerTitle:''
			}
			// v-if="showNan==true&&showNegative==false&&showChildren==false"
		},
		onLoad: function() {
			this.getBodyPart()
		},
		methods: {
			goDialogBox(item){
				uni.navigateTo({
				  url:'/pages/home/dialogBox?symCode='+item.symCode
				})
			},
			bodyClick(bbh,bname,fromtype,childtype,type){// 选择部位事件共用 部位编号，部位名称，男女，儿童标志，点击类型1图片0列表
				let obj = {
					bodyCode:bbh,
					sexType:fromtype?fromtype:this.showNan==true?'1':'2',
					isChild:childtype?childtype:this.showChildren==false?' ':'1',
				}
				guideSymptomList(obj).then(res=>{
					this.correspondingList = res.rows
					this.isShowList = true
					this.headerTitle = bname
				})
			},
			changeNan(e){console.log(e)},
			changeNegative(e){console.log(e)},
			changeChildren(e){console.log(e)},
			/* 获取身体部位 */
			getBodyPart() {
				getGuideBody().then(res => {
					console.log(res)
					this.bodyLists = res.rows
				});
			},
			sectionChange(index) {
				this.current = index;
			}
		}
	}
</script>

<style scoped lang="scss">
	page {
		height: 100%;
		.nanNv{
			position: absolute;
			right: 2rem;
			top: 3rem;
			z-index: 10;
			.uswitch{
				display: flex;
				align-items: center;
				margin-bottom: 1rem;
			}
		}
		.ertong{
			position: absolute;
			left: 2rem;
			bottom: 3rem;
			display: flex;
			align-items: center;
			z-index: 10;
		}
		.listItem{
			width: 15rem;
			padding: 0.5rem 0 0.5rem 0.5rem;
			border-bottom: 1rpx solid #eee;
			text-align: left;
		}
		.doctor-container {
			width: 94%;
			margin-left: 3%;
			height: 100%;

			.scroll-view_H {
				width: 100%;
				height: 100%;

				.list-contain {
					.item {
						padding: 24rpx;
						border-bottom: 1px solid #eeeeee;
					}
				}
				.body-contain{
					#jibingpepole {
						width: 100%;
						height: 480px;
						overflow: hidden;
						background: #f7f7f7;
						margin: 0 auto;
						position: relative;
					}
					
					.jibingpepole_top_an a {
						display: block;
						width: 60px;
						height: 30px
					}
					
					.jibingpepole_bot_an a {
						display: block;
						width: 60px;
						height: 28px;
						line-height: 28px;
						background: #bbb;
						text-align: center;
						font-size: 14px;
						color: #fff;
						margin-bottom: 11px;
						border-radius: 50px;
						-webkit-border-radius: 50px;
						-moz-border-radius: 50px
					}
					
					.jibingpepole_bot_an .jbss_color {
						background: #f7b52c
					}
					
					.jibingpepole_menz,
					.jibingpepole_nvz,
					.jibingpepole_menb,
					.jibingpepole_nvb,
					.jibingpepole_old,
					.jibingpepole_childrenz,
					.jibingpepole_childrenb,
					.jibingpepole_childrenz_nv,
					.jibingpepole_childrenb_nv{
						width: 300px;
						height: 480px;
						margin: 0 auto;
						position: relative;
						text-align: center;
						margin-top:0;
					}
					
					.jibingpepole_top_an {
						position: absolute;
						top: 10px;
						right: 0px;
					}
					.jibingpepole_bot_an {
						position: absolute;
						bottom: 16px;
						left: 0px;
						width: 54px
					}
					
					.jibingpepole_menz {
						background: url(@/static/images/man_front.png) no-repeat center;
						background-size: 200px 418px;
					}
					
					.jibingpepole_top_an a.radio-sex-man{
						background: url(@/static/images/pepole_an.png) 0 0 no-repeat;
						background-size: 60px 30px
					}
					
					.jibingpepole_top_an a.radio-zm-man{
						background: url(@/static/images/pepole_an1.png) 0 0 no-repeat;
						background-size: 60px 30px;
						margin-top:10px;
					}
					
					.jibingpepole_cent_an .men_a1{
						width: 50px;
						height: 58px;
						position: absolute;
						left: 125px;
						top: 31px;
					}
					
					.jibingpepole_cent_an .men_a2{
					    width: 30px;
					    height: 22px;
					    position: absolute;
					    left: 135px;
					    top: 88px;
					}
					
					.jibingpepole_cent_an .men_a3{
						width: 68px;
						height: 63px;
						position: absolute;
						left: 115px;
						top: 109px;
					}
					
					.jibingpepole_cent_an .men_a4{
						width: 74px;
						height: 43px;
						position: absolute;
						left: 113px;
						top: 175px;
					}
					.jibingpepole_cent_an .men_a5{
						width: 84px;
						height: 59px;
						position: absolute;
						left: 108px;
						top: 212px;
					}
					
					.jibingpepole_cent_an .men_a6{
						width: 53px;
						height: 169px;
						position: absolute;
						left: 59px;
						top: 109px;
					}
					
					.jibingpepole_cent_an .men_a7{
						width: 51px;
						height: 170px;
						position: absolute;
						left: 189px;
						top: 110px;
					}
					
					.jibingpepole_cent_an .men_a8{
						width: 84px;
						height: 178px;
						position: absolute;
						left: 108px;
						top: 270px;
					}
					
					.jibingpepole_nvz {
						background: url(@/static/images/woman_front.png) no-repeat center;
						background-size: 200px 418px;
					}
					
					.jibingpepole_top_an a.radio-sex-woman {
						background: url(@/static/images/pepole_an2.png) 0 0 no-repeat;
						background-size: 60px 30px;
					}
					
					.jibingpepole_top_an a.radio-zm-woman {
						background: url(@/static/images/pepole_an1.png) 0 0 no-repeat;
						background-size: 60px 30px;
						margin-top:10px;
					}
					
					.jibingpepole_cent_an .nv_a1{
						width: 50px;
						height: 58px;
						position: absolute;
						left: 127px;
						top: 34px;
					}
					
					.jibingpepole_cent_an .nv_a2{
						width: 20px;
						height: 20px;
						position: absolute;
						left: 142px;
						top: 90px;
					}
					
					.jibingpepole_cent_an .nv_a3{
						width: 56px;
						height: 55px;
						position: absolute;
						left: 122px;
						top: 110px;
					}
					
					.jibingpepole_cent_an .nv_a4{
						width: 66px;
						height: 44px;
						position: absolute;
						left: 118px;
						top: 170px;
					}
					.jibingpepole_cent_an .nv_a5{
						width: 78px;
						height: 40px;
						position: absolute;
						left: 113px;
						top: 210px;
					}
					
					.jibingpepole_cent_an .nv_a6{
						width: 61px;
						height: 153px;
						position: absolute;
						left: 53px;
						top: 111px;
					}
					
					.jibingpepole_cent_an .nv_a7{
						width: 58px;
						height: 155px;
						position: absolute;
						left: 188px;
						top: 112px;
					}
					
					.jibingpepole_cent_an .nv_a8{
						width: 95px;
						height: 196px;
						position: absolute;
						left: 104px;
						top: 250px;
					}
					
					
					.jibingpepole_menb {
						background: url(@/static/images/man_back.png) no-repeat center;
						background-size: 200px 418px;
					}
					
					.jibingpepole_top_an a.radio-fm-man {
						background: url(@/static/images/pepole_an3.png) 0 0 no-repeat;
						background-size: 60px 30px;
						margin-top:10px;
					}
					
					.jibingpepole_cent_an .men_b1{
						width: 59px;
					    height: 121px;
					    position: absolute;
					    left: 121px;
					    top: 103px;
					}
					
					
					.jibingpepole_nvb {
						background: url(@/static/images/woman_back.png) no-repeat center;
					    background-size: 200px 418px;
					}
					
					.jibingpepole_top_an a.radio-fm-woman{
						background: url(@/static/images/pepole_an3.png) 0 0 no-repeat;
						background-size: 60px 30px;
						margin-top:10px;
					}
					
					.jibingpepole_cent_an .nv_b1{
						width: 53px;
					    height: 106px;
					    position: absolute;
					    left: 122px;
					    top: 108px;
					}
					.jibingpepole_childrenz {
						background: url(@/static/images/child_zhengmian.png) no-repeat center;
						background-size: 200px 418px;
					}
					.jibingpepole_top_an a.radio-sex-children {
						background: url(@/static/images/pepole_an.png) 0 0 no-repeat;
						background-size: 60px 30px;
					}
					
					.jibingpepole_top_an a.radio-zm-children {
						background: url(@/static/images/pepole_an1.png) 0 0 no-repeat;
						background-size: 60px 30px;
						margin-top:10px;
					}
					
					.jibingpepole_cent_an .child_a1{
						width: 75px;
						height: 75px;
						position: absolute;
						left: 112px;
						top: 70px;
					}
					
					.jibingpepole_cent_an .child_a2{
					    width: 22px;
					    height: 20px;
					    position: absolute;
					    left: 139px;
					    top: 145px;
					}
					
					.jibingpepole_cent_an .child_a3{
					    width: 65px;
					    height: 45px;
					    position: absolute;
					    left: 118px;
					    top: 164px;
					}
					
					.jibingpepole_cent_an .child_a4{
						width: 65px;
					    height: 34px;
					    position: absolute;
					    left: 117px;
					    top: 207px;
					}
					.jibingpepole_cent_an .child_a5{
						width: 80px;
						height: 39px;
						position: absolute;
						left: 110px;
						top: 238px;
					}
					
					.jibingpepole_cent_an .child_a6{
						width: 50px;
						height: 112px;
						position: absolute;
						left: 60px;
						top: 167px;
					}
					
					.jibingpepole_cent_an .child_a7{
						width: 51px;
						height: 112px;
						position: absolute;
						left: 190px;
						top: 167px;
					}
					
					.jibingpepole_cent_an .child_a8{
						width: 79px;
						height: 130px;
						position: absolute;
						left: 111px;
						top: 279px;
					}
					
					.jibingpepole_childrenz_nv {
						background: url(@/static/images/child_nv_zhengmian.png) no-repeat center;
						background-size: 200px 418px;
					}
					.jibingpepole_top_an a.radio-sex-children_nv {
						background: url(@/static/images/pepole_an2.png) 0 0 no-repeat;
						background-size: 60px 30px;
					}
					
					.jibingpepole_top_an a.radio-zm-children_nv {
						background: url(@/static/images/pepole_an1.png) 0 0 no-repeat;
						background-size: 60px 30px;
						margin-top:10px;
					}
					
					.jibingpepole_cent_an .child_nv_a1{
					    width: 75px;
					    height: 87px;
					    position: absolute;
					    left: 112px;
					    top: 68px;
					}
					
					.jibingpepole_cent_an .child_nv_a2{
					    width: 22px;
					    height: 20px;
					    position: absolute;
					    left: 137px;
					    top: 151px;
					}
					
					.jibingpepole_cent_an .child_nv_a3{
					    width: 65px;
					    height: 56px;
					    position: absolute;
					    left: 118px;
					    top: 164px;
					}
					
					.jibingpepole_cent_an .child_nv_a4{
						width: 65px;
					    height: 38px;
					    position: absolute;
					    left: 117px;
					    top: 220px;
					}
					.jibingpepole_cent_an .child_nv_a5{
						width: 80px;
					    height: 48px;
					    position: absolute;
					    left: 110px;
					    top: 253px;
					}
					
					.jibingpepole_cent_an .child_nv_a6{
						width: 50px;
						height: 112px;
						position: absolute;
						left: 60px;
						top: 167px;
					}
					
					.jibingpepole_cent_an .child_nv_a7{
						width: 51px;
						height: 112px;
						position: absolute;
						left: 190px;
						top: 167px;
					}
					
					.jibingpepole_cent_an .child_nv_a8{
						width: 79px;
					    height: 118px;
					    position: absolute;
					    left: 111px;
					    top: 295px;
					}
					
					.jibingpepole_childrenb {
						background: url(@/static/images/child_fanmian.png) no-repeat center;
						background-size: 200px 418px;
					}
					
					.jibingpepole_top_an a.radio-fm-children {
						background: url(@/static/images/pepole_an3.png) 0 0 no-repeat;
						background-size: 60px 30px;
						margin-top:10px;
					}
					
					.jibingpepole_cent_an .child_b1{
						width: 64px;
					    height: 77px;
					    position: absolute;
					    left: 119px;
					    top: 161px;
					}
					
					.jibingpepole_childrenb_nv {
						background: url(@/static/images/child_nv_fanmian.png) no-repeat center;
						background-size: 200px 418px;
					}
					.jibingpepole_top_an a.radio-fm-children_nv {
						background: url(@/static/images/pepole_an3.png) 0 0 no-repeat;
						background-size: 60px 30px;
						margin-top:10px;
					}
					
					.jibingpepole_cent_an .child_nv_b1{
						width: 64px;
					    height: 100px;
					    position: absolute;
					    left: 119px;
					    top: 161px;
					}
				}
			}

		}

	}
</style>
